<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css" th:href="@{/css/font.css}">
    <link rel="stylesheet" href="./css/xadmin.css" th:href="@{/css/xadmin.css}">
    <script src="./lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="./js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">用户管理</a>
                <a>
                    <cite>用户列表</cite>
                </a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" type="button" id="search" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <div class="layui-inline">
                            <a onclick="xadmin.open('添加用户','add',800,600)" class="layui-btn layui-btn-normal ext_add">新增商户</a>
                        </div>
                    </form>


                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="table" lay-filter="table">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'laydate'],
        function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            //渲染表单数据
            var tableIns = table.render({
                elem: '#table',
                toolbar: '#toolbarDemo',
                url: 'list',
                page: true,
                method: 'POST',
                where: {
                    username: $("#username").val(),
                },
                height: 'full-200',
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'id', hide: true},
                    {field: 'userName', title: '用户名', width: '10%'},
                    {field: 'nickName', title: '昵称', width: '10%'},
                    {field: 'isLock', title: '用户状态', templet: '#switchState'},
                    {field: 'updateTime', title: '修改时间', width: '10%'},
                    {field: 'createTime', title: '创建时间', width: '10%'},
                ]]
            });
            //头工具栏事件
            table.on('toolbar(table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var ids = [];
                if (obj.event === "getCheckData") {
                    var data = checkStatus.data;
                    if (data.length <= 0) {
                        layer.msg("请至少选择一条数据");
                        return;
                    }
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].id)
                    }
                    layer.msg(ids + "");
                }

            });

            //
            form.on('switch(sexDemo)', function (obj) {
                var param = {"state": obj.elem.checked, "id": obj.value};
                var x = obj.elem.checked;
                layer.confirm('确认要锁定用户吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: 'POST',
                            url: "lock",
                            dataType: "json",
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(param),
                            success: function (data) {
                                if (data.resultCode == '000000') {
                                    layer.msg("状态更新成功");
                                } else {
                                    layer.msg(data.resultMessage);
                                }
                            },
                            error: function (xhr, type) {
                                console.log(xhr)
                                layer.msg("系统错误，请联系管理员！" + type + xhr);
                            }
                        });
                    },
                    function (cancel) {
                        obj.elem.checked = !x;
                        form.render();
                    }
                );
            });


            //搜索
            $("#search").on("click", function () {
                search();
            });


            //导出报表
            $("#report").on("click", function () {
                layer.confirm('是否确认导出报表', function (index) {
                    layer.close(index);
                    window.location.href = "reportMistakeList?orderNo=" + $("#orderNo").val() + "&startTime=" + $("#startTime").val() + "&endTime=" + $("#endTime").val();
                });
            });


            //搜索
            function search() {
                table.reload("table", {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        username: $("#username").val(),
                    }
                })
            }

        })
    ;


</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData"> 批量删除</button>
    </div>
</script>
<script type="text/html" id="switchState">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo"
           {{d.state== 0 ? 'checked' : '' }}>
</script>
</html>